<template>
  <div class="departmentBox">
    <!-- 列表数据 -->
    <div>
      <div class="title">部门管理</div>
      <div class="addBtn">
        <el-button type="primary" style="font-size: 12px" @click="addBoss" v-if="isButton(40)"
          >添加一级节点</el-button
        >
      </div>
      <div class="dataOver">
        <div class="dataBox">
          <el-tree
            :data="info"
            style="width: 50vh"
            node-key="id"
            :props="defaultProps"
            default-expand-all
            :expand-on-click-node="false"
            @node-click="handleNodeClick"
          />
        </div>
      </div>
    </div>
    <!-- 添加数据 -->
    <div class="addData" v-if="Data">
      <el-form
        ref="formRef"
        :model="datas"
        status-icon
        label-width="120px"
        class="demo-ruleForm"
      >
        <el-form-item label="当前节点：" prop="code">
          <span>{{ item.name }}</span>
        </el-form-item>
        <el-form-item label="节点名称："  :rules="[{ required: true, message: '请输入节点名称' }]" prop="inputValue">
          <el-input
            style="width: 260px"
            v-model="inputValue"
            type="text"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item>
          <el-button style="font-size: 13px" type="info" @click="del" v-if="isButton(42)"
            >删除当前节点</el-button
          >
          <el-button style="font-size: 13px" type="success" @click="upda(formRef)" v-if="isButton(41)"
            >修改当前节点</el-button
          >
          <el-button style="font-size: 13px" type="primary" @click="submitSon(formRef)" v-if="isButton(40)"
            >添加子节点</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <!-- 添加父节点 -->
    <div class="addData" v-if="fatherCode">
      <el-form
        ref="formRef"
        :model="datas"
        status-icon
        label-width="120px"
        class="demo-ruleForm"
      >
        <el-form-item label="节点名称：" :rules="[{ required: true, message: '请输入节点名称' }]" prop="inputValues">
          <el-input
            style="width: 260px"
            v-model="inputValues"
            type="text"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            style="font-size: 12px"
            type="primary"
            @click="addPrimaryNode(formRef)"
            >添加一级节点</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script lang='ts' setup>
// 引入css样式
import "../../static/css/department/department.css";
import {isButton} from "../../utils/isButton"
// 引入数据调接口
import {
  dementList,
  addFather,
  deleData,
} from "../../apis/department/department";
// 引入vue样式
import { reactive, onMounted, toRefs, ref } from "vue";
// 引入添加样式
import { ElMessage, ElMessageBox } from "element-plus";
// 表单验证
import type { FormInstance } from 'element-plus'
// 页面加载
onMounted(() => {
  list();
});
// 定义
const datas: any = reactive({
  // 数据
  info: [],
  // 添加子节点是否显示隐藏
  Data: false,
  // 添加父节点是否显示隐藏
  fatherCode: false,
  // 子组件的value值
  inputValue: "",
  // 父组件的value值
  inputValues: "",
  // 调接口要传的参数
  item: { id: 0, pid: 0, name: "" },
});
// 解构定义的数据
const { info, Data, fatherCode, item, inputValue, inputValues } = toRefs(datas);

const paging = reactive({ page: 1, psize: 10 });
const list = async () => {
  const res: any = await dementList(paging);
  if (res.errCode === 10000) {
    info.value = res.data.list;
  }
};
// 数据事件
const handleNodeClick = (data: any) => {
  Data.value = true;
  fatherCode.value = false;
  datas.item = data;
};
// 数据的结构
const defaultProps = {
  label: "name",
  children: "children",
};
// 添加父节点
const formRef = ref<FormInstance>();
const addBoss = () => {
  fatherCode.value = true;
  Data.value = false;
};
const father = async () => {
  let objfather = { ...datas.item, name: datas.inputValues };
  const res: any = await addFather(objfather);
  // console.log(res);
  if (res.errCode === 10000) {
    ElMessage.success({message:"添加成功",duration:1500});
    datas.inputValues = null;
    datas.item={ id: 0, pid: 0, name: "" }
    list();
  } else {
    ElMessage.error(res.errMsg);
  }
};
// 点击添加节点
const addPrimaryNode = (formEl: any | undefined) => {
  if (!formEl) return
  formEl.validate((valid: any) => {
    if (valid) {
      father();
    }
  });
};
// 删除数据
const dels = async () => {
  const res: any = await deleData({ id: datas.item.id });
  // console.log(res);
  if (res.errCode === 10000) {
    ElMessage.success("删除成功");
    Data.value = false;
    list();
  } else {
    ElMessage.error(res.errMsg);
  }
};
const del = () => {
  ElMessageBox.confirm("确定要删除该账号吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then((res) => {
      dels();
    })
    .catch((error) => {
      ElMessage.error("已取消删除");
    });
};
// 修改
const upda = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
        modify();
    } else {
      return false
    }
  })
 
};
const modify = async () => {
  
  let objdata = { ...datas.item, name: datas.inputValue };
  const res: any = await addFather(objdata);
  // console.log(res);
  if (res.errCode === 10000) {
    ElMessage.success("修改成功");
    datas.inputValue = "";
    list();
  } else {
    ElMessage.error(res.errMsg);
  }
};

// 添加子节点
const son = async () => {
  let objdata = { id: 0, name: datas.inputValue, pid: datas.item.id };
  const res: any = await addFather(objdata);
  // console.log(res);
  if (res.errCode === 10000) {
    ElMessage.success("添加成功");
    datas.inputValue = "";
    list();
  } else {
    ElMessage.error(res.errMsg);
  }
};
const submitSon = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
       son();
    } else {
      return false
    }
  })
 
};
</script>